<template>
	<div>
    <div class="titleDiv">
      <div>政策兑现申请</div>
    </div>
    <div class="nameDiv">
      <span>申报政策：</span>
      <span class="policyName" @click="$router.push({path: 'policyDetail', query: {id: sendMsg.policyId}})">{{policy.policy.name}}</span>
    </div>
    <div class="statusDiv">
      <span>申报审核状态：</span>
      <span  :style="{color: formatApplyStatus(policy.applyStatus).color}">{{formatApplyStatus(policy.applyStatus).label}}</span>
      <!-- <span  :style="{color:  policy.redemptionStatus == 4?formatApplyStatus(policy.redemptionStatus).color:formatApplyStatus(policy.applyStatus).color}">{{policy.redemptionStatus == 4?formatApplyStatus(policy.redemptionStatus).label:formatApplyStatus(policy.applyStatus).label}}</span> -->
    </div>
    <div class="formDiv">
      <el-form ref="form" :model="sendMsg" :rules="rules" label-width="150px" class="form">
        <el-form-item label="兑现形式：" class="blackLabel"
                v-if="redemptionForm == 1 || redemptionForm == 2 || redemptionForm == 3">
          <div style="width: 100%; text-align: left">{{redemptionForm == 1 ? '资金' : redemptionForm == 2 ? '实物' : '其他'}}</div>
        </el-form-item>
        <el-form-item label="兑现额度："  v-if="redemptionForm == 1" prop="redemptionAmount">
          <div style="display: flex;">
            <el-input-number v-model.trim="sendMsg.redemptionAmount" class="inputNumber"
                      placeholder="请输入" :controls="false" :disabled="true" style="width: 90%"
                      :precision="2" :min="0"></el-input-number>
            <div style="background-color: #EEEEEE; width: 10%; border-top-right-radius: 3px; border-bottom-right-radius: 3px;">
              元
            </div>
          </div>
        </el-form-item>
        <el-form-item label="账户名称：" v-if="redemptionForm == 1" prop="accountName">
          <el-input v-model.trim="sendMsg.accountName" placeholder="请输入" maxLength="50"></el-input>
        </el-form-item>
        <el-form-item label="银行名称：" v-if="redemptionForm == 1" prop="accountBank">
          <el-input v-model.trim="sendMsg.accountBank" placeholder="请输入" maxLength="50"></el-input>
        </el-form-item>
        <el-form-item label="银行账户：" v-if="redemptionForm == 1" prop="accountNumber">
          <el-input :value="sendMsg.accountNumber" placeholder="请输入" @input="changeAccountNumber" :maxLength="20"></el-input>
        </el-form-item>
        
        <el-form-item label="兑现内容：" v-if="redemptionForm == 2 || redemptionForm == 3" prop="redemptionContent">
          <el-input v-model.trim="sendMsg.redemptionContent" :disabled="false" placeholder="请输入" maxLength="1000"></el-input>
        </el-form-item>
        <el-form-item label="兑现说明：" v-if="redemptionForm == 1" prop="description">
          <el-input v-model.trim="sendMsg.description" placeholder="请输入" maxLength="1000"></el-input>
        </el-form-item>
        <el-form-item label="上传兑现材料：" class="blackLabel">
          <div style="text-align: left">
            <el-button class="uploadBtn" icon="el-icon-upload" @click="selectFile()">上传文件
            </el-button>
            <div style="display: flex; align-items: center" v-for="(file, index) in sendMsg.files" :key="index">
              <span>{{file.name}}</span>
              <i class="el-icon-close deleteBtn" @click="deleteFile(index)"></i>
            </div>
            <input type="file" ref="fileInput" accept=".rar, .zip, .doc, .docx, .pdf, .xls, .xlsx, .jpg, .png"
                  v-show="false" @change="changeFile"></input>
            <div style="color: #999999">文件大小不超过30M，支持扩展名：.rar .zip .doc .docx .pdf .xls .xlsx .jpg .png</div>
          </div>
        </el-form-item>
        <el-form-item label="">
            <Buttons :buttons="buttons" @sendCheck="sendCheck" @none="''" class="btns"></Buttons>
            <!-- <div class="sendBtn" :style="'color :' + formatBtn(policy).color + '; background-color :' + formatBtn(policy).bgColor" @click="sendCheck" v-if="!isSended">立即申请</div>
            <div class="sendBtn" style="color : #FFFFFF; background-color : #6CB7ED" v-if="isSended">已申报</div> -->
        </el-form-item>
      </el-form>
    </div>		
		<MaskCover :title="'提交中，请稍等...'" v-show="sending"></MaskCover>
	</div>
</template>

<script>
import MaskCover from "@/components/maskCover";

import { request, uploadFile } from "@/utils/request.js";
import config from "@/utils/config.js";
import {
  checkLogin,
  confirmEnding,
  formatSendBtn,
} from "@/utils/util.js";

import sendUp from '@/formRules/policy/sendUp.js'

import { getPolicyRedemption } from '@/common/api/company.js'

export default {
  name: "companySendUpload",
  components: { MaskCover },
  mixins: [sendUp],
  computed: {
    buttons() {
      if(!this.isSended){
        return [{ text: "立即申报", type: "success", size: "l", method: "sendCheck" }]
      } else {
        return [{ text: "已申报", type: "weakSuccess", size: "l", method: "none", disabled:true }]
      }
    }
  },
  data() {
    return {
      redemptionForm: 2, //兑现类型
      redemptionAmount: null, //最大兑现金额
      policy: {
        applyStatus: null,
        policy: {
          name: "",
        },
      },
      totalSize : 0, //文件总大小
      isSended: false,
      sending: false,
      applyStatusList: [
        {
          value: 1,
          label: "待审核",
        },
        {
          value: 2,
          label: "审核中",
        },
        {
          value: 3,
          label: "审核通过",
          color: "#10a217",
        },
        {
          value: 4,
          label: "未通过",
          color: "#d00000",
        },
      ]
    };
  },
  methods: {
    // 判断银行账户输入的是否为数字
    changeAccountNumber(e){
      if(!(/^[0-9]*$/.test(e))){
        return
      }
      this.sendMsg.accountNumber = e;
    },
    /**
     * 返回上一页
     */
    goBack: function () {
      let ns = this;
      ns.$router.go(-1);
    },
    /**
     * 获取政策信息
     */
    getPolicy() {
      let ns = this;
      ns.sendMsg.applyId = ns.$route.query.applyId;
      ns.sendMsg.redemptionId = ns.$route.query.redemptionId;
      getPolicyRedemption(ns.$route.query.applyId).then(res => {
        ns.sendMsg.policyId = res.data.policyId;
        ns.policy.policy.name = res.data.policyName;
        ns.policy.applyStatus = res.data.applyStatus;
        ns.policy.redemptionStatus = res.data.redemptionStatus;
        ns.redemptionForm = res.data.redemptionForm;
        ns.redemptionAmount = res.data.redemptionAmount;
        ns.sendMsg.redemptionAmount = res.data.redemptionAmount || '';
        ns.sendMsg.redemptionContent = res.data.redemptionContent;
      })
    },
    /**
     * 格式化显示申报状态
     * @param applyStatus 要格式化显示的申报状态
     * @return 格式化后的申报状态对象
     */
    formatApplyStatus: function (applyStatus) {
      let ns = this;
      for (let i = 0; i < ns.applyStatusList.length; i++) {
        if (applyStatus == ns.applyStatusList[i].value) {
          return ns.applyStatusList[i];
        }
      }
      return { label: "" };
    },
    /**
     * 选择文件事件
     */
    selectFile: function () {
      let ns = this;
      ns.$refs.fileInput.click();
    },
    /**
     * 完成选择文件事件
     */
    changeFile: function (e) {
      let ns = this;
      let file = e.target.files[0];
      if (file == undefined) {
        return;
      }
				// 检测文件大小是否过大
				this.totalSize += parseInt(file.size) 
				console.log("this.totalSize",this.totalSize)
      if (file.size / 1048576 >= 30 || this.totalSize / 1048576 >= 30) { // 原为50MB,10-12改为30MB
					this.totalSize -= parseInt(file.size) 
        ns.$message.error("文件合计大小不能超过30MB");
        return;
      }
      if (
        !confirmEnding(file.name, [
          '.rar',
          '.zip',
          '.doc',
          '.docx',
          '.pdf',
          '.jpg',
          '.xls', 
          '.xlsx', 
          '.png'
        ])
      ) {
        ns.$message.error("文件格式不正确");
        return;
      }
      ns.sendMsg.files.push(file);
    },
    /**
     * 删除文件
     */
    deleteFile: function (index) {
      let ns = this;
      let fileList = [];
      for (let i = 0; i < ns.sendMsg.files.length; i++) {
        if (i != index) {
          fileList.push(ns.sendMsg.files[i]);
        }else{
						// 把全局的总计大小减去
						this.totalSize -= parseInt(ns.sendMsg.files[i].size) 
					}
      }
      ns.sendMsg.files = fileList;
    },
    sendCheck() {
      this.$refs['form'].validate(valid => {
        if(valid) {
          this.sendPolicy()
        }
      })
    },
    /**
     * 申报政策
     */
    sendPolicy() {
      let ns = this;
      ns.sending = true;
      let formData = new FormData();
      for (let i = 0; i < ns.sendMsg.files.length; i++) {
        formData.append("files", ns.sendMsg.files[i]);
      }
      formData.append("accountName", ns.sendMsg.accountName);
      formData.append("accountBank", ns.sendMsg.accountBank);
      formData.append("accountNumber", ns.sendMsg.accountNumber);
      formData.append("redemptionAmount", ns.sendMsg.redemptionAmount);
      formData.append("redemptionContent", ns.sendMsg.redemptionContent);
      formData.append("description", ns.sendMsg.description);
      let api = "";
      if (ns.$route.query.addItemAgain == 1) {
        formData.append("redemptionId", ns.sendMsg.redemptionId);
        api = config.api.policyRedemptionAddItemAgain;
      } else {
        formData.append("applyId", ns.sendMsg.applyId);
        api = config.api.policyRedemptionAddItem;
      }
      uploadFile(ns, api, formData).then(function (res) {
        ns.sending = false;
        if (res.code == 200) {
          ns.$message.success("申报成功");
          ns.getPolicy();
          ns.isSended = true;
          ns.$router.push({ path: "companySend" }); //返回列表页
        } else {
          ns.$message.error(res.msg);
        }
      });
    },
    /**
     * 格式化显示按钮颜色
     */
    formatBtn: function (policy) {
      return formatSendBtn(policy);
    },
  },
  mounted() {
    let ns = this;
    if (checkLogin(ns)) {
      ns.getPolicy();
    }
  },
};
</script>

<style scoped>
.btns{
  justify-content: left !important;
}

.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}

.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.backBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

.roomDiv {
  display: flex;
  justify-content: center;
}

.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
}

.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}

.roomDiv .rightDiv .nameDiv {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
}

.roomDiv .rightDiv .nameDiv .policyName {
  color: #045db9;
}

.roomDiv .rightDiv .nameDiv .policyName:hover {
  text-decoration: underline;
  cursor: pointer;
}

.roomDiv .rightDiv .statusDiv {
  font-size: 14px;
  color: #999999;
}

.roomDiv .rightDiv .formDiv {
  width: 800px;
  margin: 0 auto;
  padding: 30px 0;
}

::v-deep .roomDiv .rightDiv .formDiv .el-form-item__label {
  color: #d00000;
}

::v-deep .roomDiv .rightDiv .formDiv .blackLabel .el-form-item__label {
  color: #666666;
}

::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.roomDiv .rightDiv .formDiv .uploadBtn {
  background-color: #f1f2f4;
  color: #045db9;
  border-width: 0;
}

.roomDiv .rightDiv .formDiv .sendBtn {
  padding: 0 20px;
  background-color: #045db9;
  display: inline-block;
  color: #ffffff;
  border-radius: 5px;
}

.roomDiv .rightDiv .formDiv .sendBtn:hover {
  box-shadow: 0px 5px 5px #e1e1e1;
  transition: all 0.2s ease 0s;
  cursor: pointer;
}

.roomDiv .rightDiv .formDiv .deleteBtn {
  font-size: 20px;
  color: #d00000;
  font-weight: bold;
  margin-left: 10px;
}

.roomDiv .rightDiv .formDiv .deleteBtn:hover {
  cursor: pointer;
}

.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>
